<div class="row">
	<div class="col-xs-12">
		<div class="box">
			<div class="box-header">
				<h3 class="box-title">角色管理</h3>

				<div class="box-tools">
					<div class="input-group input-group-sm" style="width: 350px;">
						<input type="text" name="table_search" id="searchNameId"
							class="form-control pull-right" placeholder="角色名">

						<div class="input-group-btn">
							<button type="button" class="btn btn-default btn-search">
								<i class="fa fa-search"></i>
							</button>

							<button type="button" class="btn btn-default btn-add">添加</button>
						</div>
					</div>
				</div>
			</div>
			<!-- /.box-header -->
			<div class="box-body table-responsive no-padding">
				<form>
					<table class="table table-hover">
						<thead>
							<tr>
								<th>角色名称</th>
								<th>备注</th>
								<th>创建时间</th>
								<th>修改时间</th>
								<th>创建用户</th>
								<th>修改用户</th>
								<th>操作</th>
							</tr>
						</thead>
						<tbody id="tbodyId">
						</tbody>
					</table>
				</form>
			</div>
			<!-- /.box-body -->
			<div id="pageId" class="box-footer clearfix">
				<script type="text/javascript">
					$("#pageId").load("doPageUI.do");
				</script>
			</div>
		</div>
		<!-- /.box -->
	</div>
</div>
<script type="text/javascript">
	$(function() {
		//异步加载,要加载当前页面和common/page.html，page.html文件内容为上一页，下一页，是一个通用界面，别的界面需要用到直接加载出来就好。
		$("#pageId").load("doPageUI.do", function(){
			//debugger
			doGetObjects()//加载上一页，下一页等内容		   
		});
		$(".input-group-btn").on("click", ".btn-search", doQueryObjects)
		.on("click",".btn-add",doLoadEditUI)
		$("#tbodyId").on("click",".btn-delete",doDeleteObject)
		.on("click",".btn-update",doLoadEditUI)
		
	});
	function doLoadEditUI(){
		
		var title,flag;
		if($(this).hasClass("btn-add")){
			title="添加角色"
		}else{
			var id=$(this).parents("tr").data("id")
			title="更新角色"
			flag=doLoadObjectById(id);
			
		}
		if(!flag)return;
		
		var url="role/doRoleEditUI.do";
		$("#mainContentId").load(url,function(){
			$(".box-title").html(title);
		})
	}
	function doLoadObjectById(id){
		var flag =true;
		var url="role/doFindObjectById.do"
		var params={id:id}
		$.ajax({
			url:url,
			data:params,
			async:false,
			success:function(result){
				if(result.state==1){
					console.log(result.data)
					$("#mainContentId").data("roleData",result.data)
				}else{
					alert(result.message)
					flag=false
				}		
			}
		});
		return flag;
	}
	function doDeleteObject(){
		//1.获取当前行记录id
	      var id=$(this).parents("tr").data("id");
	      //2.基于id执行异步删除操作
	      var params={"id":id};
	      var url="role/doDeleteObject.do";
	      $.post(url,params,function(result){
	    	  if(result.state==1){
	    		  alert(result.message);
	    		  doGetObjects();
	    	  }else{
	    		  alert(result.message);
	    	  }
	      });
		
	}
	function doQueryObjects() {
		$("#pageId").data("pageCurrent", 1)
		doGetObjects();
	}
	function doGetObjects() {
		var pageCurrent = $("#pageId").data("pageCurrent");
		if (!pageCurrent)
			pageCurrent = 1;
		var params = {
			"pageCurrent" : pageCurrent
		}
		//debugger
		var name = $("#searchNameId").val();
		if (name)
			params.name = name
		var url = "role/doFindPageObjects.do"
		$.getJSON(url,params,function(result) {
			doHandleResponse(result);//这里的result就是服务端返回的jsonresult。
		})
	}
	function doHandleResponse(result) {
		console.log("123");
		if (result.state == 1) {
			doSetTableBodyRows(result.data.records);//输出页面内容
			doSetPagination(result.data)//给当前页，总页数赋值。，这个方法的实现在page页面里
		} else {
			alert(result.message)//
		}
	}
	function doSetTableBodyRows(records) {
		var tBody = $("#tbodyId")
		tBody.empty();
		for ( var i in records) {
			var tr = $("<tr></tr>")
			tr.data("id", records[i].id)//这个地方故意给tr注入一个id属性，方便以后使用
			var tds = createdTds(records[i])
			tr.append(tds)
			tBody.append(tr)
		}
	}
	function createdTds(row) {
		var tds=
		"<td>"+row.name+"</td>"+
		"<td>"+row.note+"</td>"+
		"<td>"+row.createdTime+"</td>"+
		"<td>"+row.ModifiedTime+"</td>"+
		"<td>"+row.createdUser+"</td>"+
		"<td>"+row.modifiedUser+"</td>"+
		"<td><a class='btn-update'>修改</a>&nbsp;<a class='btn-delete'>删除</a></td>";
		return tds;	
	}
	
</script>











